<template>
  <div>
    {{ msg }}
    <!-- 1. 过滤器格式: vue变量 | 过滤器名 -->
    <!-- 翻转过滤器reverse -->
    <p>{{ msg | reverse }}</p>
    <!-- 首字母过滤器first -->
    <p :title="msg | toUp">鼠标长时间停留</p>
  </div>
</template>

<script>
import Vue from "vue";
Vue.filter("toUp", (val) => { // 2. 全局过滤器: 到处使用
  return val.toUpperCase();
});

export default {
  data() {
    return {
      msg: "hello, world",
    };
  },
  filters: { // 3. 局部过滤器: 只能在当前的vue文件中使用
    reverse(val) {
      return val.split("").reverse().join("");
    },
  },
};
</script>

<style>
</style>